<template>
  <view class="container">
    <view class="card">
      <view class="section">
        <text class="label">订单编号：</text>
        <text>{{ order.order_no }}</text>
      </view>
      <view class="section">
        <text class="label">出发地点：</text>
        <text>{{ order.sendAddress.provinceInfo.text }}{{ order.sendAddress.cityInfo.text }}{{ order.sendAddress.address
        }}</text>
      </view>
      <view class="section">
        <text class="label">到达地点：</text>
        <text>{{ order.targetAddress.provinceInfo.text }}{{ order.targetAddress.cityInfo.text }}{{
          order.targetAddress.address }}</text>
      </view>
      <view class="section">
        <text class="label">联系电话：</text>
        <text class="phone">{{ order.sendAddress.phone }}</text>
      </view>
      <view class="section">
      <text class="label">订单状态：</text>
      <text :class="'status status-'+order.status_tag">{{order.status_text}}</text>
    </view>
    </view>

    <view class="card" v-for="(item, index) in order.petList" :key="index">
      <text class="title">宠物信息</text>
      <image class="pet-image" :src="item.img" mode="aspectFill"></image>
      <view class="section">
        <text class="label">宠物名字：</text>
        <text>{{ item.pet_name }}</text>
      </view>
      <view class="section">
        <text class="label">宠物重量：</text>
        <text>{{ item.weight }}斤</text>
      </view>
    </view>

    <view class="card">
      <view class="section">
        <text class="label">订单金额：</text>
        <text>¥{{ order.order_amount }}</text>
      </view>
      <view class="section">
        <text class="label">订单积分：</text>
        <text>{{ order.order_score }}</text>
      </view>
      <view class="section">
        <text class="label">订单创建时间：</text>
        <text>{{ order.create_time }}</text>
      </view>
    </view>

    <view class="card">
      <text class="title">物流进度</text>
      <view class="steps">
        <block v-for="(item, index) in order.traceLogs" :key="index">
          <view class="step-item  completed">
            <view class="circle"></view>
            <view class="step-content">
              <text class="step-title">{{ item.op_log }}</text>
              <text class="step-time">{{ item.create_time }}</text>
              <image class="step-image" :src="item.photoItem.photo" mode="aspectFill"></image>
            </view>
          </view>
        </block>
      </view>
    </view>
  </view>

</template>
<script>
import { getOrder } from '../../../../requests/user/order';


export default {
  name: 'OrderDetail',
  data() {
    return {
      order: {
        orderId: '123456',
        from: '广州市天河区',
        to: '广州市番禺区',
        phone: '13800138000',
        pet: {
          image: 'https://cdn.nlark.com/yuque/0/2020/png/97322/1606821916821-4b3b1b1b-1b1b-4b3b-8b1b-1b4b3b1b4b3b.png',
          name: '旺财',
          weight: '5kg'
        },
        points: 100,
        createdAt: '2020-12-01 12:00:00'
      }
    }
  },

  onLoad(options) {

    getOrder(options.id).then(res => {
      this.order = res.data
    })
  }
}
</script>
<style>
@import url(index.css);
</style>